<!--
 * @Author: zhangmengqiong
 * @Date: 2021-05-11 10:21:42
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-05-11 15:16:40
-->
<template>
  <common-card title="今日交易用户数" value="81,014">
    <template>
      <v-chart :option="initChartOption()" />
    </template>
    <template v-slot:footer>
      <span>退货率 </span>
      <span class="emphasis">5.14%</span>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from "@/mixins/commonCardMixin";
export default {
  mixins: [commonCardMixin],
  mounted() {},
  methods: {
    initChartOption() {
      let option = {
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false, // 不展示x轴
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00"
          ]
        },
        yAxis: {
          type: "value",
          show: false // 不展示y轴
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        series: [
          {
            data: [
              620,
              436,
              330,
              534,
              798,
              438,
              634,
              834,
              690,
              538,
              238,
              640,
              780
            ],
            type: "bar",
            areaStyle: {
              // 面积颜色
              color: "purple"
            },
            barWidth: "60%",
            smooth: true
          }
        ]
      };
      return option;
    }
  }
};
</script>
